<template>
    <div class="otitle">
        <img src="./images/right.png" alt="">
        <div class="c-middle">
            <p class="ocollection">收藏商品</p>
            <p class="guanzhu">关注店铺</p>
        </div>       
        <p class="guanli">完成</p>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
.otitle{
    width: 100%;
    height: 0.88rem;
    position: relative;
    background: #fff;
}
.otitle img{
    width: 0.22rem;
    height: 0.32rem;
    position: absolute;
    top: 50%;
    margin-top: -0.14rem;
    left: 0.3rem;
}
.otitle .guanli{
    font-size: 0.28rem;
    color: #F52E67;
    font-weight: bold;
    position: absolute;
    top: 50%;
    margin-top: -0.15rem;
    right: 0.3rem;
}
.c-middle{
    width: 40%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.c-middle p{
    font-size: 0.32rem;
    font-weight: bold;
    font-family: PingFang-SC-Bold;
    line-height: 0.9rem;
    color: #191E2A;
}
.c-middle .ocollection{
    position: relative;
}
.c-middle .ocollection::after{
   content: '';
   width: 0.6rem;
   height: 0.02rem;
   background: #F52E67;
   border: 0.02rem solid #F52E67;
   position: absolute;
   top: 0.8rem;
   left: 0.31rem;
}
.c-middle .guanzhu{
    color: #B3B5B8;
}
</style>
